<template>
  <body>
  <div class="documet">
    <div class="body">
      <div class="user_info_basic">
        <span class="userid">{{ userInfo.blogName }}</span>
        <!--todo 个人信息设置，诸如头像，简介，昵称等，需要再次构建一个 vue 组件-->
        <span class="gxqm">{{ userInfo.signature }}</span>
      </div>
      <br>
      <div class="info_complex">
        <div class="left">
          <div class="left_div1">
            <div class="category">
              <div class="personal_info">
                <a><img :src="userInfo.avatar"></a><br>
                <a><span class="username">{{ userInfo.username }}</span></a>
                <br>
                <el-button type="info">{{ userInfo.userType }}</el-button>
                <el-button type="danger">{{ userInfo.vipType }}</el-button>
                <div class="ww">
                  <span>访问：{{ userInfo.visits }}</span><br>
                  <span>积分：{{ userInfo.points }}</span><br>
                  <span>等级：{{ userInfo.level }}</span>
                </div>
              </div>
              <div class="class_title">
                <ul>
                  <li v-for="category in categories" :key="category.name"><a>{{ category.name }} ({{ category.count }})</a></li>
                </ul>
              </div>
            </div>
            <div class="essay_list">
              <div v-for="essay in essays" :key="essay.title" class="essay">
                <a><span class="myblog_title">{{ essay.title }}</span></a>
                <p class="summary">{{ essay.summary }}</p>
                <div class="info">
                  <span class="time">{{ essay.time }}</span>
                  <span>    </span>
                  <div style="font-size: 20px">
                    <!-- 由于SVG图标默认不携带任何属性 -->
                    <!-- 你需要直接提供它们 -->
                    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
                    <Share style="width: 1em; height: 1em; margin-right: 8px" />
                    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
                    <Search style="width: 1em; height: 1em; margin-right: 8px" />
                  </div>
                </div>
                <hr>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </body>
</template>

<script>
import store from "@/store";
import {computed} from "vue";

export default {
  data() {
    return {
      userInfo: {
        blogName: 'Alice的博客',
        signature: '程序有问题时不要担心。如果所有东西都没问题，你就失业了',
        avatar: require('@/assets/index_notlogin/tx.jpg'),
        username: 'Alice',
        userType: '普通用户',
        vipType: '高级用户',
        visits: 850,
        points: 23,
        level: 12,
      },
      categories: [
        { name: '算法', count: 10 },
        { name: 'web', count: 5 },
        { name: '大数据分析', count: 15 },
        { name: '操作系统', count: 6 },
      ],
      essays: [
        {
          title: '十个程序员必备的网站推荐',
          summary: '程序员的工作和日常生活非常的枯燥，这里给大家推荐一些程序员经常使用的网站...',
          time: '2024-04-16 10:23:45',
          reads: 56,
          comments: 15,
        },
        {
          title: 'CSS中伪类和伪元素的区别',
          summary: '1.css中的伪类：伪类是基于当前元素所处的状态...',
          time: '2024-04-05 12:35:12',
          reads: 56,
          comments: 15,
        },
        {
          title: '浅谈Html5的优势和劣势',
          summary: '作为Html的第五次重大改革，Html5在以下方面均有改进...',
          time: '2024-03-25 17:56:10',
          reads: 56,
          comments: 15,
        },
      ],
    };
  },
};
const username = computed(() => store.getters.username);
const password = computed(() => store.getters.password);
</script>

<style scoped>
/* 全局字体设置 */
body {
  font-family: 'HarmonyOS Sans SC', sans-serif;
  font-size: 16px; /* 设置默认字体大小 */
  line-height: 1.6; /* 行高，使文本更易阅读 */
  background-color: #f5f5f5; /* 背景色可选 */
  box-sizing: border-box; /* 让所有元素包含 padding 和 border 在宽高内 */
}

/* 为所有元素设置 box-sizing 规则 */
*, *::before, *::after {
  box-sizing: inherit;
}

/* 链接的默认样式 */
a {
  color: #3498db; /* 链接默认颜色 */
  text-decoration: none; /* 去除下划线 */
}

a:hover {
  color: #2980b9; /* 悬停时改变颜色 */
  text-decoration: underline; /* 悬停时添加下划线 */
}
/* CSS Document */
/*底部*/
*{
  margin:0;
  padding:0;
}
a{
  text-decoration:none;
}
ul{
  list-style:none;
}
body {
  background-image: url(@/assets/myblog/bg.jpg);
  background-size: cover; /* 确保背景图铺满整个页面 */
  background-position: center; /* 背景图居中 */
  background-repeat: no-repeat; /* 背景图不重复 */
  height: 100vh; /* 确保背景覆盖整个视口 */
  margin: 0;
}
.menu_right img{
  width:30px;
  height:30px;
  display:block;
  background-color:#F5F5F5;
  border:1px solid #F6F6F6;
  margin-top:15px;
  padding:10px;
}

.foot a{
  text-decoration:none;
  color:#666;
}
.body{
  width:1200px;
  margin:0 auto;
}



.left .cate li:hover{
  background-color:#92C0E7;
  color:#000;
}
.left_div1{
  overflow:hidden;
}
.left .category{
  float:left;
  width:300px;
  margin-top:5px;
}

/* 个人资料区域样式 */
.personal_info {
  background-color: rgba(249, 249, 249, 0.9); /* 背景颜色 */
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  padding: 20px;
  width: 275px; /* 宽度可调整 */
  margin: 20px auto; /* 居中 */
  color: #333;
}

/* 头像样式 */
.personal_info img {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 圆形头像 */
  margin-bottom: auto;
  transition: transform 0.3s ease;
}

.personal_info img:hover {
  transform: scale(1.05); /* 悬停放大效果 */
}

/* 用户名样式 */
.personal_info .username {
  font-size: 18px;
  font-weight: bold;
  color: #3498db; /* 蓝色用户名 */
  margin-top: 10px;
  display: block;
  text-decoration: none;
}

.personal_info .username:hover {
  text-decoration: underline; /* 悬停时下划线 */
}

/* 基本信息部分样式 */
.personal_info .ww, .personal_info .qq {
  text-align: left; /* 左对齐文本 */
  margin-top: 15px;
}

.personal_info .ww span, .personal_info .qq span {
  display: inline-block;
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 5px;
}

.personal_info .pp {
  font-weight: bold;
  color: #3498db; /* 数字部分使用蓝色加粗 */
}

/* 微调样式 */
.personal_info .qq span {
  margin-right: 10px;
}


/* 分类标题部分样式 */
.class_title {
  background-color: rgba(249, 249, 249, 0.8); /* 背景颜色 */
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  padding: 20px;
  width: 275px; /* 宽度可调整 */
  margin: 20px auto; /* 居中 */
  color: #333;
}


/* 分类列表样式 */
.class_title ul {
  list-style-type: none; /* 去除列表前面的圆点 */
  padding: 0;
  margin: 0;
}

.class_title li {
  margin-bottom: 10px;
}

.class_title a {
  text-decoration: none; /* 去除下划线 */
  font-size: 16px;
  color: #3498db; /* 蓝色链接 */
  padding: 10px 15px;
  display: block;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.class_title a:hover {
  background-color: #3498db; /* 悬停时背景色变蓝 */
  color: white; /* 悬停时文字变白 */
}

.left .category ul{
  margin-left:20px;
  margin-top:10px;
  margin-bottom:20px;
}

.left .category ul li{
  margin-top:5px;
}
.left .essay_list{
  float:right;
  width:75%;
  border-radius: 15px; /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加阴影 */
  margin-top:5px;
  background-color: rgba(254, 255, 249, 0.6);
}
.left .essay_list .essay .myblog_title{
  display:inline-block;
  padding-top:20px;
  margin-left:20px;
  font-family:"HarmonyOS Sans SC",serif;
  font-size:20px;
  color:#333;
}
.left .essay_list .essay p{
  font-family:"HarmonyOS Sans SC",serif;
  font-size:14px;
  color:#909090;
  width:650px;
  margin:5px 0 20px 20px;
  text-indent:2em;
}
.essay_list .essay img{
  width:25px;
  height:13px;
}
.essay_list .essay .info{
  width:400px;
  margin-left:500px;
  font-size:12px;
  margin-bottom:20px;
}
.small,.time{
  margin-right: 10px;
  color:#666;
}
.essay_list .essay a,.color{
  color:#C8AE33;
}
/* 设置 essay 列表整体样式 */
.essay {
  background-color: #fff; /* 白色背景 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影 */
  padding: 20px;
  margin: 20px 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.essay:hover {
  transform: translateY(-5px); /* 鼠标悬停时向上移动 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* 悬停时增强阴影 */
}

/* 标题样式 */
.myblog_title {
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50; /* 深色标题 */
  text-decoration: none;
  transition: color 0.3s;
}

.myblog_title:hover {
  color: #3498db; /* 悬停时标题变蓝 */
}

/* 摘要部分样式 */
.summary {
  font-size: 14px;
  color: #7f8c8d; /* 灰色字体 */
  margin: 10px 0 20px;
  line-height: 1.6;
}

/* 信息区样式 */
.info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #95a5a6; /* 信息颜色较浅 */
}

.info img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.color {
  color: #3498db; /* 蓝色文字 */
  font-weight: bold;
}

.small {
  color: #7f8c8d; /* 灰色小字体 */
}

/* 分割线样式 */
hr {
  border: none;
  border-top: 1px solid #ecf0f1;
  margin-top: 20px;
}
.head ul{
  list-style:none;
  position:absolute;
  top:0;
  right:70px;
}
.head ul li{
  float:left;
}

.ul_title li:hover ul{
  display:block;
}

/*ONE*/

.head .title_search_down input{
  color:#CCC;
  width:450px;
  height:30px;
  margin:8px 20px 10px 20px;
  background-image:url(../../src/assets/enter.png);
  background-repeat:no-repeat;
  background-position:430px 3px;
  padding-left:10px;
  border:1px solid #CCC;
}
.head .title_search_down input:hover{
  border:1px solid #333;
}


/*TWO*/

.ul_title .title_collect_down li{
  width:400px;
  height:200px;
  position:absolute;
  right:-63px;
  top:50px;
  background-color:#FFF;
}
.ul_title .title_collect_down li span{
  display:inline-block;
  margin-left:20px;
  margin-top:20px;
  font-size:16px;
  color:#333;
}

.ul_title .title_collect_down li .position a{
  color:#1E5BFF;
}


/*THREE*/

.ul_title .title_inform_down a{
  text-size:14px;
  color:#06C;
}

.ul_title .title_inform_down .jt span{
  position:absolute;
  top:2px;
  right:30px;
  font-size:15px;
  color:#999;

}

.ul_title .title_personal_down li>img{
  width:100px;
  margin-left:20px;
  margin-top:20px;
  background-color:#E1F4D9;
}

.ul_title .title_personal_down .first span{
  display:inline-block;
  margin-bottom:7px;
  font-size:14px;
}
.ul_title .title_personal_down .two img{
  width:22px;
  margin-left:20px;
  padding-top:14px;
}

/*SIX*/

.ul_title .title_others_down div{
  float:left;
  width:120px;
}
.ul_title .title_others_down div span{
  display:block;
  font-size:18px;
  margin-top:20px;
  margin-left:20px;
  margin-bottom:15px;
  padding-bottom:6px;
  width:100px;
  border-bottom:1px solid #333333;
}
.ul_title .title_others_down div a{
  display:block;
  margin-left:20px;
  margin-bottom:8px;
  padding-bottom:5px;
  padding-left:5px;
  color:#303030;
  width:80px;
  border-bottom:1px dotted #999;
}
.user_info_basic {
  width: 100%;
  max-width: 1200px;
  height: auto;
  background-color: rgba(240, 244, 248, 0.64); /* 淡蓝色背景 */
  display: flex;
  flex-direction: column;
  justify-content: left;
  padding: 20px;
  font-family: 'HarmonyOS Sans SC', sans-serif;
  color: #333;
}

.user_info_basic .userid {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50; /* 深色字体 */
  margin-bottom: 10px;
  text-align: center;
}

.user_info_basic .gxqm {
  font-size: 16px;
  color: #3e566e; /* 深色字体 */
  text-align: center;
  line-height: 1.5;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .user_info_basic {
    padding: 15px;
  }

  .user_info_basic .userid {
    font-size: 20px;
  }

  .user_info_basic .gxqm {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .user_info_basic {
    padding: 10px;
  }

  .user_info_basic .userid {
    font-size: 18px;
  }

  .user_info_basic .gxqm {
    font-size: 12px;
  }
}
</style>